<template>
    <div>
        <div class="d-flex-pk justify-content-between align-content-center">
            <div >
                <span>满</span>
                <span>{{max}}</span>
                <span>张券即可开奖</span>
            </div>
            <div>进度{{percentage}}%</div>
        </div>
        <van-progress pivot-text="" color="#FF5300" :stroke-width="size" :percentage="percentage" />
    </div>
</template>

<script>
    import { Progress } from 'vant';
    export default {
        name: "ProgressBar",
        components:{
            [Progress.name]:Progress
        },
        props:{
            pivotText:{
                type:String,
                default:""
            },
            color:{
                type:String,
                default:"FF5300"
            },
            size:{
                type:Number,
                default:6
            },
            value:{
                type:Number,
                default:0
            },
            max:{
                type:Number,
                default:0
            }
        },
        computed:{
            percentage:{
                get:function(){
                    if (this.value === 0 || this.max === 0) {
                        return 0;
                    } else {
                        let press = Math.floor((this.value / this.max) * 100);
                        if (press > 100) {
                            press = 100;
                        }
                        return press;
                    }
                },
                set:function(value){
                    return value;
                }
            }
        },
        methods:{
            /**
             * 百分比显示条
             * @param val 要计算的阶梯（百分比）
             * @param max 总量
             */
            progressControl: function (val, max) {
                let v = parseInt(val);
                let m = parseInt(max)
                if (val === 0) {
                    return 0;
                } else {
                    let press = Math.floor((v / m) * 100);
                    if (press > 100) {
                        press = 100;
                    }
                    return press;
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
@import "treasure";
</style>